<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>团检结算</title>
  <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  <style>
    body {
        font-size: 14px;
    }
    a {
        display: inline-block;
        text-decoration: none;
        color: #000;
        padding: 0;
        margin: 0;
    }
    .content {
        /* width: 1200px; */
        /* margin: 100px auto; */
        /* border: 1px solid #000;
        margin: 100px; */
    }
    
    .list_item_box li {
        margin-bottom: 10px;
        font-size: 14px;
        list-style: none;
    }
    .list_item_box li span {
        display: inline-block ;
        /* width: 100px; */
        margin-right: 10px;
    }
    .list_item_box li span:first-child {
        text-align: right;
        position: relative;
    }
    .list_item_box li span:last-child {
        width: 300px;
    }
    .formBox {
        margin-left: 60px;
    }
    .form-item {
        margin-bottom: 10px;
    }
    .form-item .btn {
        /* width: 80px; */
        padding: 0 10px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        background: rgba(64, 158, 255, 1);
        border-radius: 10px;
        margin: 50px 100px;
    }
    .form-item label {
        position: relative;
    }
    .form-item label::before {
        content: '*';
        color: red;
        position: absolute;
        top: 0;
        left: -10px;
    }
  </style>

  
</head>
<body>
  <div class="content">
    <ul class="list_item_box">
        <li>
            <span>企业名称:</span>
            <span>山西欣欣软件公司</span>
        </li>
        <li>
            <span>企业统一信用代码:</span>
            <span>123566156145641516</span>
        </li>
        <li>
            <span>企业联系人:</span>
            <span>张辉</span>
        </li>
        <li>
            <span>联系人电话:</span>
            <span>13555556666</span>
        </li>
        <li>
            <span>体检日期:</span>
            <span>2023.05.06-2023.05.10</span>
        </li>
        <li>
            <span>总体检人数:</span>
            <span>200人</span>
        </li>
        <li>
            <span>实际体检人数:</span>
            <span>190人</span>
        </li>
        <li>
            <span>团建结算方式:</span>
            <span>固定套餐</span>
        </li>
        <li>
            <span>费用合计:</span>
            <table border="1" style="border-collapse: collapse;">
                <tr>
                    <th>费用名称</th>
                    <th>总金额(元)</th>
                    <th>员工自付总费用（元）</th>
                    <th>企业承担总费用（元）</th>
                </tr>
                <tr>
                    <td>金额</td>
                    <td>68700.0</td>
                    <td>68700.0</td>
                    <td>68700.0</td>
                </tr>

            </table>
        </li>
    </ul>
    <div class="formBox">
        <form id="ff" method="post">
            <div class="form-item">
                <label for="name">企业结算优惠比例:</label>
                <input class=" easyui-validatebox" placeholder="输入内容" type="text" name="name" data-options="required:false" style="width: 270px;height: 30px;"/>%
            </div>
            <div class="form-item">
                <label for="name">企业实际支付金额:</label>
                <input class=" easyui-validatebox" placeholder="输入内容" type="text" name="name" data-options="required:false" style="width: 270px;height: 30px;"/>元
            </div>
            <div class="form-item">
                <a href="#" class="btn">生成结算中</a>
            </div>
        </form>
    </div>
  </div>
  <script type="text/javascript" src="../../easyui/js/jquery.min.js"></script>
  <script type="text/javascript" src="../../easyui/js/jquery.easyui.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //
    })
  </script>
</body>
</html>
